<template>
	<view>
		<view class="redPacket-info-view">
			<view class="redPacket-info-bg1">
				<view class="redPacket-info1-item">
					<view class="redPacket-info1-title util-font-medium">我的红包</view>
					<view class="redPacket-info1-text util-font-medium">{{parseInt(data.amount)/100.}}元</view>
				</view>
			</view>
			<view class="redPacket-info1-tips util-font-medium" @click="rules">红包规则</view>
			<scroll-view class="JSSegmentedControl" scroll-x="trues" @scroll="scroll">
				<view class="JSSegmentedControlItem" v-for="(item, index) in segmentedControlTitles" :key="index" @click="segmentControlDidSelected(index)">
					<view :class="[(segmentedControlSelectedIndex == index) ? 'JSSegmentedControlItemTitle-selected util-font-medium' : 'JSSegmentedControlItemTitle-normal util-font-regular']">{{item}}</view>
					<view :class="[(segmentedControlSelectedIndex == index) ? 'JSSegmentedControlItemLine-selected' : 'JSSegmentedControlItemLine-normal']"></view>
				</view>
			</scroll-view>
		</view>
		<view class="row" v-for="(item, index) in dataList" :key="index">
			<view class="row-left-view">
				<view v-if="item.type == 0" class="row-title util-font-regular">邀请新用户注册</view>
				<view v-if="item.type == 2" class="row-title util-font-regular">取消订单</view>
				<view v-if="item.type == 3" class="row-title util-font-regular">购买商品</view>
				<view class="row-time util-font-regular">{{item.createTime}}</view>
			</view>
			<view class="row-right-view util-font-regular">
				{{((item.status == 0)?'+':'-') + (parseInt(item.amount)/100.)}}元
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				segmentedControlTitles: ["收入", "支出"],
				segmentedControlSelectedIndex: 0,
				
				data: null,
				dataList: [],
			}
		},
		onLoad() {
			this.loadAmountData()
			this.loadData()
		},
		onPullDownRefresh() {
			this.loadAmountData()
			this.loadData()
		},
		methods: {
			loadAmountData: function(){
				var that = this
				that.sendRequest({
					url: 'app/appRedPacket/statistics/' + uni.getStorageSync('userInfo').id,
					method: "POST",
					header: that.$urlRequest.getHeader('token', 'json'),
					success: function(res){
						that.data = res.data.data
					}
				})
			},
			loadData: function(){
				var that = this
				that.sendRequest({
					url: 'app/appRedPacketRecords/page',
					method: 'POST',
					header: that.$urlRequest.getHeader('token'),
					data: {
						userId: uni.getStorageSync('userInfo').id,
						status: that.segmentedControlSelectedIndex
					},
					success: function(res){
						that.dataList = res.data.records
					}
				})
			},
			segmentControlDidSelected: function(index){
				this.segmentedControlSelectedIndex = index
				this.loadData()
			},
			rules: function(){
				uni.navigateTo({
					url: 'redPacketRule'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
	.redPacket-info-view {
		width: 100%;
		height: 340upx;
		background: linear-gradient(to top, #ffdcc4, #fd6601);
		position: relative;
	}
	.redPacket-info-bg1 {
		width: 690upx;
		height: 240upx;
		position: relative;
		padding: 30upx;
	}
	.redPacket-info1-title {
		width: 100%;
		height: 55upx;
		line-height: 55upx;
		color: white;
		font-size: 32upx;
		
	}
	.redPacket-info1-text {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		color: white;
		font-size: 70upx;
		margin-top: 15upx;
	}
	.redPacket-info1-tips {
		height: 55upx;
		line-height: 55upx;
		color: white;
		font-size: 24upx;
		position: absolute;
		top: 15upx;
		right: 30upx;
	}
	
	
	.JSSegmentedControl {
		z-index: 9990;
		position: absolute;
		/* css变量 */
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		background-color: white;
		white-space: nowrap;
		border-top-left-radius: 15upx;
		border-top-right-radius: 15upx;
	}
	
	.JSSegmentedControlItem {
		display: inline-block;
		width: 375upx;
		height: 100upx;
		text-align: center;
		white-space: nowrap;
		position: relative;
	}
	
	.JSSegmentedControlItemTitle-normal {
		height: 70upx;
		line-height: 70upx;
		font-size: 34upx;
		font-family: 'PingFangSC-Regular';
		color: #333333;
	}
	
	.JSSegmentedControlItemTitle-selected {
		height: 70upx;
		line-height: 70upx;
		font-size: 34upx;
		font-family: 'PingFangSC-Medium';
		color: #fd6601;
	}
	
	.JSSegmentedControlItemLine-normal {
		width: 65upx;
		height: 10upx;
		border-radius: 5upx;
		margin: 0 auto;
		position: absolute;
		top: 50upx;
		left: 155upx;
	}
	.JSSegmentedControlItemLine-selected {
		width: 65upx;
		height: 10upx;
		border-radius: 5upx;
		margin: 0 auto;
		position: absolute;
		top: 50upx;
		left: 155upx;
		background-color: #ffdcc4;
	}
	
	.row {
		width: 690upx;
		height: 90upx;
		margin: 0 30upx;
		padding: 30upx 0;
		border-bottom: 2upx solid #f1f1f1;
	}
	.row-left-view {
		width: 400upx;
		height: 90upx;
		float: left;
	}
	.row-title {
		width: 100%;
		height: 50upx;
		line-height: 50upx;
		font-size: 32upx;
		color: #333333;
	}
	.row-time {
		width: 100%;
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #999999;
	}
	.row-right-view {
		width: 290upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 32upx;
		color: #333333;
		float: right;
		text-align: right;
	}
	
</style>
